<template>
  <div class="echarts-container">
    <div class="container-top">
      <div class="top-item" ref="charts1"></div>
      <div class="top-item" ref="charts2"></div>
      <div class="top-item" ref="charts3"></div>
    </div>
    <div class="container-bottom">
      <div class="bottom-item" ref="charts4"></div>
      <div class="bottom-item" ref="charts5"></div>
      <div class="bottom-item" ref="charts6"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import * as echarts from 'echarts';
//@ts-ignore
import {onMounted, ref} from "vue";
//获取图形的DOM节点
let charts1 = ref();
let charts2 = ref();
let charts3 = ref();
let charts4 = ref();
let charts5 = ref();
let charts6 = ref();
var highlight = '#4e62f6';

var demoData = [
  {name: 'IAS', value: 105, unit: 'kt', pos: ['50%', '55%'], range: [0, 150]},
  {name: 'GndSpd', value: 87, unit: 'kt', pos: ['50%', '55%'], range: [0, 130]},
  {name: 'VSpd', value: 875, unit: 'fpm', pos: ['50%', '55%'], range: [-1500, 1500]},
  {name: 'TAS', value: 105, unit: 'kt', pos: ['50%', '55%'], range: [0, 150]},
  {name: 'VSpdG', value: -670, unit: 'fpm', pos: ['50%', '55%'], range: [-1500, 1500]},
  {name: 'E1RPM', value: 2300, unit: 'rpm', pos: ['50%', '55%'], range: [0, 2500]},
];


let option1 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[0].name}: ${params.value} ${demoData[0].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[0].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[0].range[0],
      max: demoData[0].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[0].name,
      type: 'gauge',
      center: demoData[0].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[0].range[0],
      max: demoData[0].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[0].unit || ''), '{name|' + demoData[0].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[0].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};
let option2 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[1].name}: ${params.value} ${demoData[1].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[1].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[1].range[0],
      max: demoData[1].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[1].name,
      type: 'gauge',
      center: demoData[1].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[1].range[0],
      max: demoData[1].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[1].unit || ''), '{name|' + demoData[1].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[1].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};
let option3 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[2].name}: ${params.value} ${demoData[2].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[2].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[2].range[0],
      max: demoData[2].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[2].name,
      type: 'gauge',
      center: demoData[2].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[2].range[0],
      max: demoData[2].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[2].unit || ''), '{name|' + demoData[2].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[2].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};
let option4 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[3].name}: ${params.value} ${demoData[3].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[3].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[3].range[0],
      max: demoData[3].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[3].name,
      type: 'gauge',
      center: demoData[3].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[3].range[0],
      max: demoData[3].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[3].unit || ''), '{name|' + demoData[3].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[3].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};
let option5 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[4].name}: ${params.value} ${demoData[4].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[4].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[4].range[0],
      max: demoData[4].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[4].name,
      type: 'gauge',
      center: demoData[4].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[4].range[0],
      max: demoData[4].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[4].unit || ''), '{name|' + demoData[4].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[4].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};
let option6 = {
  backgroundColor: '#222939',
  tooltip: { // 添加tooltip配置
    trigger: 'item', // 触发类型，对于仪表盘通常使用'item'
    formatter: (params:any) =>{
      // 自定义tooltip内容格式
      return `${demoData[5].name}: ${params.value} ${demoData[5].unit || ''}`;
    },
    backgroundColor: 'rgba(0,0,0,0.7)', // tooltip背景色
    textStyle: {
      color: '#fff', // tooltip文字颜色
    },
  },
  series: [
    // 外围刻度
    {
      type: 'gauge',
      center: demoData[5].pos,
      radius: '80%',
      splitNumber: 10,
      min: demoData[5].range[0],
      max: demoData[5].range[1],
      startAngle: 225,
      endAngle: -45,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [[1, highlight]],
        },
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: highlight,
          width: 1,
        },
        length: -5,
        splitNumber: 10,
      },
      splitLine: {
        show: true,
        length: -14,
        lineStyle: {
          color: highlight,
        },
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: highlight,
          fontSize: '14',
          fontWeight: 'bold',
        },
      },
      pointer: {
        show: 0,
      },
      detail: {
        show: 0,
      },
    },

    // 内侧指针、数值显示
    {
      name: demoData[5].name,
      type: 'gauge',
      center: demoData[5].pos,
      radius: '80%',
      startAngle: 225,
      endAngle: -45,
      min: demoData[5].range[0],
      max: demoData[5].range[1],
      axisLine: {
        show: true,
        lineStyle: {
          width: 16,
          color: [[1, 'rgba(255,255,255,.1)']],
        },
      },
      axisTick: {
        show: 0,
      },
      splitLine: {
        show: 0,
      },
      axisLabel: {
        show: 0,
      },
      pointer: {
        show: true,
        length: '105%',
      },
      detail: {
        show: true,
        offsetCenter: [0, '115%'],
        textStyle: {
          fontSize: 20,
          color: '#fff',
        },
        formatter: ['{value} ' + (demoData[5].unit || ''), '{name|' + demoData[5].name + '}'].join('\n'),
        rich: {
          name: {
            fontSize: 20,
            lineHeight: 30,
            color: '#ddd',
            padding: [0, 0, 120, 0]
          },
        },
      },
      itemStyle: {
        normal: {
          color: highlight,
        },
      },
      data: [
        {
          value: demoData[5].value,
        },
      ],
      anchor: {
        show: true,
        showAbove: true,
        size: 24,
        itemStyle: {
          color: '#fff',
        },
      },
    }
  ]
};


onMounted(() => {
  //初始化echarts实例
  let mycharts1 = echarts.init(charts1.value);
  let mycharts2 = echarts.init(charts2.value);
  let mycharts3 = echarts.init(charts3.value);
  let mycharts4 = echarts.init(charts4.value);
  let mycharts5 = echarts.init(charts5.value);
  let mycharts6 = echarts.init(charts6.value);
  //设置配置项
  mycharts1.setOption(option1)
  mycharts2.setOption(option2)
  mycharts3.setOption(option3)
  mycharts4.setOption(option4)
  mycharts5.setOption(option5)
  mycharts6.setOption(option6)
})
</script>

<style scoped lang="scss">
.echarts-container {
  display: flex;
  flex-direction: column;
  //align-items: center;
  //justify-content: center;
  //background-color: #93efc2;
  height: 90%;
  //width: 80%;
  padding: 5px;

  .container-top {
    width: 100%;
    height: 100%;
    margin-bottom: 5px;

    // 设置内部div为flex布局，每行3个item
    display: flex;
    flex-wrap: nowrap; // 禁止换行
    justify-content: space-around;

    //background-color: greenyellow;

    // 对于子div设置宽度为1/3，并且居中显示
    > div {
      flex: 0 0 calc(100% / 3); // 宽度为父容器的1/3，不缩放

      //background-color: cornflowerblue;
    }
  }

  .container-bottom {
    width: 100%;
    height: 100%;
    margin-top: 5px;

    // 设置内部div为flex布局，每行3个item
    display: flex;
    flex-wrap: nowrap; // 禁止换行
    justify-content: space-around;

    //background-color: greenyellow;

    // 对于子div设置宽度为1/3，并且居中显示
    > div {
      flex: 0 0 calc(100% / 3); // 宽度为父容器的1/3，不缩放
      //background-color: cornflowerblue;
    }
  }
}

</style>